<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>-更新你的安全问题</title>
    <jsp:include page="header.jsp"/>
    <style>
        .error-info {
            color: red;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div>
    <form action="#" role="form" class="form-signin" method="post" id="form">
        <input type="hidden" name="method" value="updateQa">
        <h2 class="form-signin-heading text-center" style="font-size: 25px;font-weight: 700;">更新你的安全问题</h2>
        <select class="form-control mt-5 qa-select" id="question1" name="questionOne">
            <option value="-1">安全问题1</option>
        </select>
        <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
               autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
               id="answer1" name="answerOne">
        <select class="form-control mt-5 qa-select" id="question2" name="questionTwo">
            <option value="-1">安全问题2</option>
        </select>
        <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
               autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
               id="answer2" name="answerTwo">
        <select class="form-control mt-5 qa-select" id="question3" name="questionThree">
            <option value="-1">安全问题3</option>
        </select>
        <input type="text" class="form-control mt-5" placeholder="你的答案" required autofocus
               autocomplete="off" oninvalid="setCustomValidity('请输入你的答案');" oninput="setCustomValidity('');"
               id="answer3" name="answerThree">
        <button type="button" class="btn btn-primary btn-block mt-5" id="save">保存</button>
        <div id="form-footer clearfix" class="mt-5">
            <span class="error-info pull-left" id="errMsg"></span>
        </div>
    </form>
</div>
<jsp:include page="footer.jsp"/>
<script>
    $(function () {
        getQuestion();

        $("select.qa-select").on("change", function () {
            var index = $(this).prop('selectedIndex');
            //先解开所有的option
            $("select.qa-select option").attr("disabled", false);
            //锁上兄弟节点的option
            $.each($(this).siblings("select.qa-select"), function () {
                $(this).find("option").eq(index).attr("disabled", true);
                var _index = $(this).prop('selectedIndex');
                if (_index !== 0) {
                    $.each($(this).siblings("select.qa-select"), function () {
                        $(this).find("option").eq(_index).attr("disabled", true);
                    });
                }
            });
        });

        $("#save").on("click", function () {
            $("#errMsg").text("");
            var q1 = $("#question1").val();
            var a1 = $.trim($("#answer1").val());
            var q2 = $("#question2").val();
            var a2 = $.trim($("#answer2").val());
            var q3 = $("#question3").val();
            var a3 = $.trim($("#answer3").val());
            if (q1 === "-1" || q2 === "-1" || q2 === "-1") {
                $("#errMsg").text("请选择安全问题");
                return;
            }
            if (q1 === q2 || q1 === q3 || q2 === q3) {
                $("#errMsg").text("安全问题不能重复");
                return;
            }
            if (!a1 || !a2 || !a3) {
                $("#errMsg").text("请输入你的答案");
                return;
            }
            $.ajax({
                url:"${pageContext.request.contextPath}/question",
                type:"post",
                data:$("#form").serialize(),
                dataType:"json",
                success:function (result){
                    $("#errMsg").text(result.msg);
                    if (result.status === 20000) {
                        setTimeout(function () {
                            parent.closeWindow("#editQa");
                        }, 1000)
                    }
                }
            });
        });
    });

    function getQuestion() {
        $.get("${pageContext.request.contextPath}/manage/security?method=findAll", function (result) {
            var _result = result.data;
            var html = "";
            $.each(_result, function () {
                html += '<option value="' + this.id + '">';
                html += this.question;
                html += '</option>';
            });
            $("#question1, #question2, #question3").append(html);
        }, "json");
    }
</script>
</body>
</html>
